<template>
    <div class="con">
        <img src="../assets/images/logo.png" alt="" class="logo" onclick="return false">
        <div class="bg">
            <img src="../assets/images/statistics.png" alt="" onclick="return false">
            <input type="date" class="date" v-model="date" @change="choosedate()">
                <div class="list">
                    <ul>
                        <li style="background: #f9c7dd;" class="topLeft"><img src="../assets/images/4.png" alt="" onclick="return false"></li>
                        <li style="background:#78d2f7"><img src="../assets/images/5.png" alt="" onclick="return false"></li>
                        <li style="background:#e4eb9a"><img src="../assets/images/6.png" alt="" onclick="return false"></li>
                        <li style="background: #fdc172;" class="topRight"><img src="../assets/images/7.png" alt="" onclick="return false"></li>
                    </ul>
                    <ul v-for="item in this.data">
                        <li>{{item.create_time}}</li>
                        <li>{{item.ticket_type}}</li>
                        <li>{{item.person_count}}</li>
                        <li>{{item.ticket_count}}</li>
                    </ul> 
                  
                </div>  
        </div>
        <div class="wood">
            <img src="../assets/images/wood.png" alt="" onclick="return false">
        </div>
        <div class="wood" v-for="item in this.data">
            <img src="../assets/images/wood.png" alt="" onclick="return false">
        </div>      
    </div>
</template>

<script>
export default {
    name: "ticketStatistics",
    data() {
        return {
            date: "",
            data: []
        };
    },
    methods: {
        choosedate() {
            var qs = require("qs");
            this.axios({
                method: "post",
                url: `${this.siteUrl}/piaowu/api/ticket_statistics`,
                data: qs.stringify({
                    member_id: $.cookie("osc_member_id"),
                    token: $.cookie("osc_member_token"),
                    staff_id: localStorage.getItem("staff_id"),
                    staff_token: localStorage.getItem("staff_token"),
                    date: this.date
                })
            })
                .then(response => {
                    if (response.data.status == 1) {
                        this.data = response.data.data;
                    } else {
                        alert("请求失败：" + response.data.msg);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_MyPoints";
    },
    mounted: function() {
        var qs = require("qs");
        this.axios({
            method: "post",
            url: `${this.siteUrl}/piaowu/api/ticket_statistics`,
            data: qs.stringify({
                member_id: $.cookie("osc_member_id"),
                token: $.cookie("osc_member_token"),
                staff_id: localStorage.getItem("staff_id"),
                staff_token: localStorage.getItem("staff_token")
            })
        })
            .then(response => {
                if (response.data.status == 1) {
                    this.data = response.data.data;
                } else {
                    alert("请求失败：" + response.data.msg);
                }
            })
            .catch(function(error) {
                console.log(error);
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    text-align: center;
}
.con img {
    width: 100%;
}
.con .logo {
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 30%);
}

.con .wood {
    margin-top: -12px;
}
.con .wood img {
    width: 88%;
}

.con .bg {
    position: relative;
}

.con .list {
    width: 80%;
    position: absolute;
    top: 98%;
    left: 9%;
    box-shadow: 2px 10px 15px 0px #000;
}

.con .list img {
    width: 50%;
    padding-top: 14px;
}
.con .list li {
    width: 25%;
    float: left;
    height: 12vw;
    border-right: 1px solid #595355;
    border-bottom: 1px solid #595355;
    box-sizing: border-box;
    line-height: 12vw;
    background: #fff;
    font-size: 11px;
}

.con .topLeft {
    border-top-left-radius: 10px;
}
.con .topLeft img {
    width: 80%;
}
.con .topRight {
    border-top-right-radius: 10px;
}
.con .date {
    position: absolute;
    top: 76%;
    left: 48%;
    height: 10%;
    width: 33%;
}
</style>
